<template>
    <div class="v-input-search">
        <form class="v-input-form" @submit="search">
            <input class="v-input" type="text" v-model="searchKey" :placeholder="placeholder">
            <button class="v-input-btn">
                <a-icon style="font-size:16px" type="search" />
            </button>
        </form>
    </div>
</template>

<script>
export default {
    name: "v-input-search",
    props: {
        placeholder: {
            type: String,
            default: "请输入关键词"
        }
    },
    data() {
        return {
            searchKey: ""
        }
    },
    methods: {
        search(e) {
            e.preventDefault();
            this.$emit('onSearch', this.searchKey);
        }
    }
}
</script>

<style lang="less" scoped>
.v-input-search{
    width: 100%;
    .v-input-form{
        display: flex;
        align-items: center;
        .v-input{
            padding: 4px 11px;
            color: rgba(0,0,0,0.85098);
            font-size: 14px;
            line-height: 1.5715;
            background-color: #fff;
            background-image: none;
            border: 1px solid #d9d9d9;
            border-radius: 2px 0 0 2px;
            transition: all 0.3s;
            height: 32px;
            &:focus{
                border-color: #40a9ff;
                border-right-width: 1px;
                outline: 0;
                box-shadow: 0 0 0 2px #1890ff33;
            }
            &::placeholder{
                color: #d9d9d9;
            }
        }
        .v-input-btn{
            color: #fff;
            background: #1890ff;
            border-color: #1890ff;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            height: 32px;
            padding: 4px 15px;
            font-size: 14px;
            border-radius: 0 2px 2px 0;
        }
    }
}
</style>